<template>
  <div class="settings-container">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <div class="nav-left">
        <button class="back-button" @click="$router.push('/')">
          <el-icon>
            <ArrowLeft />
          </el-icon>
        </button>
        <div class="nav-title">
          <h1>设置</h1>
          <span class="nav-subtitle">个性化您的浏览器首页</span>
        </div>
      </div>
      <div class="nav-right">
        <div class="user-info" v-if="authStore.user">
          <span class="user-email">{{ authStore.user.email }}</span>
          <div class="user-avatar">
            <img v-if="authStore.profile?.avatarUrl" :src="authStore.profile.avatarUrl" alt="头像" />
            <el-icon v-else>
              <User />
            </el-icon>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧边栏 -->
      <div class="sidebar">
        <div class="sidebar-section">
          <div class="section-title">数据管理</div>
          <nav class="nav-menu">
            <button :class="['nav-item', { active: activeTab === 'auth' }]" @click="activeTab = 'auth'">
              <el-icon class="nav-icon">
                <UserFilled />
              </el-icon>
              <span>用户认证</span>
            </button>
            <button :class="['nav-item', { active: activeTab === 'bookmarks' }]" @click="activeTab = 'bookmarks'">
              <el-icon class="nav-icon">
                <Star />
              </el-icon>
              <span>书签管理</span>
            </button>
          </nav>
        </div>

        <div class="sidebar-section">
          <div class="section-title">应用配置</div>
          <nav class="nav-menu">
            <button :class="['nav-item', { active: activeTab === 'settings' }]" @click="activeTab = 'settings'">
              <el-icon class="nav-icon">
                <Setting />
              </el-icon>
              <span>应用设置</span>
            </button>
          </nav>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="content-area">
        <!-- 用户认证面板 -->
        <div v-if="activeTab === 'auth'" class="content-panel">
          <div class="panel-header">
            <div class="header-left">
              <h2 class="panel-title">用户认证</h2>
              <div class="panel-actions" v-if="!authStore.user">
                <div class="auth-tabs">
                  <button :class="['tab-btn', { active: authMode === 'login' }]" @click="authMode = 'login'">
                    登录
                  </button>
                  <button :class="['tab-btn', { active: authMode === 'register' }]" @click="authMode = 'register'">
                    注册
                  </button>
                </div>
              </div>
            </div>
            <div class="header-right" v-if="authStore.user">
              <button class="action-btn danger" @click="handleLogout">
                <el-icon>
                  <SwitchButton />
                </el-icon>
                退出登录
              </button>
            </div>
          </div>

          <div class="panel-content">
            <!-- 未登录状态 -->
            <div v-if="!authStore.user" class="auth-form-container">
              <form @submit.prevent="handleAuth" class="auth-form">
                <div class="form-row">
                  <div class="form-group">
                    <label class="form-label">邮箱地址</label>
                    <input v-model="authForm.email" type="email" class="form-input" placeholder="请输入您的邮箱" required />
                  </div>
                </div>

                <div class="form-row">
                  <div class="form-group">
                    <label class="form-label">密码</label>
                    <input v-model="authForm.password" type="password" class="form-input" placeholder="请输入密码"
                      required />
                  </div>
                </div>

                <div class="form-actions">
                  <button type="submit" class="primary-btn" :disabled="authLoading">
                    <span v-if="authLoading" class="loading-spinner"></span>
                    {{ authLoading ? '处理中...' : (authMode === 'login' ? '登录' : '注册') }}
                  </button>
                </div>
              </form>
            </div>

            <!-- 已登录状态 -->
            <div v-else class="user-profile-container">
              <div class="profile-section">
                <div class="profile-header">
                  <div class="profile-avatar-large">
                    <img v-if="authStore.profile?.avatarUrl" :src="authStore.profile.avatarUrl" alt="头像" />
                    <el-icon v-else>
                      <User />
                    </el-icon>
                  </div>
                  <div class="profile-info">
                    <h3 class="profile-name">{{ authStore.profile?.nickname || '未设置昵称' }}</h3>
                    <p class="profile-email">{{ authStore.user.email }}</p>
                  </div>
                </div>
              </div>

              <div class="profile-form">
                <div class="form-row">
                  <div class="form-group">
                    <label class="form-label">昵称</label>
                    <input v-model="profileForm.nickname" type="text" class="form-input" placeholder="请输入昵称" />
                  </div>
                  <div class="form-group">
                    <label class="form-label">头像链接</label>
                    <input v-model="profileForm.avatarUrl" type="url" class="form-input" placeholder="请输入头像图片链接" />
                  </div>
                </div>

                <div class="form-actions">
                  <button @click="updateProfile" class="secondary-btn" :disabled="profileLoading">
                    <span v-if="profileLoading" class="loading-spinner"></span>
                    {{ profileLoading ? '更新中...' : '更新资料' }}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 书签管理面板 -->
        <div v-if="activeTab === 'bookmarks' && authStore.user" class="content-panel">
          <div class="panel-header">
            <div class="header-left">
              <h2 class="panel-title">书签管理</h2>
              <div class="panel-stats">
                <span class="stat-item">{{ bookmarks.length }} 个书签</span>
              </div>
            </div>
            <div class="header-right">
              <button class="action-btn primary" @click="showAddBookmark = true">
                <el-icon>
                  <Plus />
                </el-icon>
                添加书签
              </button>
            </div>
          </div>

          <div class="panel-content">
            <div v-if="bookmarks.length === 0" class="empty-state">
              <div class="empty-icon">
                <el-icon>
                  <Star />
                </el-icon>
              </div>
              <h3>暂无书签</h3>
              <p>点击上方"添加书签"按钮来添加您的第一个书签</p>
              <button class="primary-btn" @click="showAddBookmark = true">
                <el-icon>
                  <Plus />
                </el-icon>
                添加书签
              </button>
            </div>

            <div v-else class="table-container">
              <table class="data-table">
                <thead>
                  <tr>
                    <th width="40">拖拽</th>
                    <th>图标</th>
                    <th>名称</th>
                    <th>网址</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <draggable v-model="sortableBookmarks" tag="tbody" item-key="id" handle=".drag-handle" @end="onDragEnd"
                  :animation="200" ghost-class="ghost-row" chosen-class="chosen-row">
                  <template #item="{ element: bookmark }">
                    <tr class="table-row draggable-row">
                      <td class="drag-cell">
                        <div class="drag-handle">
                          <el-icon>
                            <Rank />
                          </el-icon>
                        </div>
                      </td>
                      <td>
                        <img :src="bookmark.iconUrl || getFavicon(bookmark.url)" :alt="bookmark.title" class="favicon" />
                      </td>
                      <td class="bookmark-title">{{ bookmark.title }}</td>
                      <td class="bookmark-url">{{ bookmark.url }}</td>
                      <td>
                        <div class="action-buttons">
                          <button @click="editBookmark(bookmark)" class="edit-btn" title="编辑书签">
                            <el-icon>
                              <Edit />
                            </el-icon>
                          </button>
                          <button @click="deleteBookmark(bookmark.id)" class="delete-btn" title="删除书签">
                            <el-icon>
                              <Delete />
                            </el-icon>
                          </button>
                        </div>
                      </td>
                    </tr>
                  </template>
                </draggable>
              </table>
            </div>
          </div>
        </div>

        <!-- 应用设置面板 -->
        <div v-if="activeTab === 'settings' && authStore.user" class="content-panel">
          <div class="panel-header">
            <div class="header-left">
              <h2 class="panel-title">应用设置</h2>
            </div>
            <div class="header-right">
              <button @click="updateSettings" class="action-btn primary" :disabled="settingsLoading">
                <span v-if="settingsLoading" class="loading-spinner"></span>
                {{ settingsLoading ? '保存中...' : '保存设置' }}
              </button>
            </div>
          </div>

          <div class="panel-content">
            <div class="settings-grid">
              <div class="setting-card">
                <div class="setting-header">
                  <h3>主题设置</h3>
                  <p>选择您喜欢的主题模式</p>
                </div>
                <div class="setting-control">
                  <select v-model="settingsForm.theme" class="form-select">
                    <option value="LIGHT">浅色主题</option>
                    <option value="DARK">深色主题</option>
                    <option value="AUTO">跟随系统</option>
                  </select>
                </div>
              </div>

              <div class="setting-card">
                <div class="setting-header">
                  <h3>搜索引擎</h3>
                  <p>设置默认搜索引擎</p>
                </div>
                <div class="setting-control">
                  <select v-model="settingsForm.searchEngine" class="form-select">
                    <option value="GOOGLE">Google</option>
                    <option value="BAIDU">百度</option>
                    <option value="BING">必应</option>
                  </select>
                </div>
              </div>

              <div class="setting-card full-width">
                <div class="setting-header">
                  <h3>背景设置</h3>
                  <p>自定义首页背景样式</p>
                </div>
                <div class="setting-control">
                  <div class="form-row">
                    <div class="form-group">
                      <label class="form-label">背景类型</label>
                      <select v-model="settingsForm.backgroundType" class="form-select">
                        <option value="GRADIENT">渐变背景</option>
                        <option value="IMAGE">图片背景</option>
                        <option value="COLOR">纯色背景</option>
                      </select>
                    </div>
                  </div>
                  <div class="form-row" v-if="settingsForm.backgroundType === 'IMAGE'">
                    <div class="form-group">
                      <label class="form-label">背景图片链接</label>
                      <input v-model="settingsForm.backgroundValue" type="url" class="form-input"
                        placeholder="请输入背景图片链接" />
                    </div>
                  </div>
                  <div class="form-row" v-if="settingsForm.backgroundType === 'COLOR'">
                    <div class="form-group">
                      <label class="form-label">背景颜色</label>
                      <input v-model="settingsForm.backgroundValue" type="color" class="form-input"
                        placeholder="#000000" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加书签对话框 -->
    <el-dialog v-model="showAddBookmark" title="添加书签" width="500px" center class="custom-dialog">
      <div class="dialog-content">
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">书签名称</label>
            <input v-model="newBookmark.title" type="text" class="form-input" placeholder="请输入书签名称" />
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">网站地址</label>
            <input v-model="newBookmark.url" type="url" class="form-input" placeholder="https://example.com" />
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">书签图标</label>
            <input v-model="newBookmark.icon" type="url" class="form-input" placeholder="图标URL (可选，留空将自动获取网站图标)" />
          </div>
        </div>
        <div v-if="newBookmark.icon" class="form-row">
          <div class="form-group">
            <label class="form-label">图标预览</label>
            <div class="icon-preview">
              <img :src="newBookmark.icon" alt="图标预览" @error="iconError = true" @load="iconError = false" />
              <span v-if="iconError" class="error-text">图标加载失败</span>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <button class="secondary-btn" @click="showAddBookmark = false">取消</button>
          <button class="primary-btn" @click="saveBookmark">保存书签</button>
        </div>
      </template>
    </el-dialog>

    <!-- 编辑书签对话框 -->
    <el-dialog v-model="showEditBookmark" title="编辑书签" width="500px" center class="custom-dialog">
      <div class="dialog-content">
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">书签名称</label>
            <input v-model="editingBookmark.title" type="text" class="form-input" placeholder="请输入书签名称" />
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">网站地址</label>
            <input v-model="editingBookmark.url" type="url" class="form-input" placeholder="https://example.com" />
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">书签图标</label>
            <input v-model="editingBookmark.icon" type="url" class="form-input" placeholder="图标URL (可选，留空将自动获取网站图标)" />
          </div>
        </div>
        <div v-if="editingBookmark.icon" class="form-row">
          <div class="form-group">
            <label class="form-label">图标预览</label>
            <div class="icon-preview">
              <img :src="editingBookmark.icon" alt="图标预览" @error="editIconError = true" @load="editIconError = false" />
              <span v-if="editIconError" class="error-text">图标加载失败</span>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <button class="secondary-btn" @click="showEditBookmark = false">取消</button>
          <button class="primary-btn" @click="saveEditBookmark">保存更改</button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import draggable from 'vuedraggable'
import { ArrowLeft, User, SwitchButton, Plus, Delete, Edit, Setting, Star, UserFilled, Rank } from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/auth'
import { useBookmarksStore } from '@/stores/bookmarks'

const authStore = useAuthStore()
const bookmarksStore = useBookmarksStore()

const activeTab = ref('auth')

// 认证相关
const authMode = ref<'login' | 'register'>('login')
const authLoading = ref(false)
const authForm = reactive({
  email: '',
  password: ''
})

// 用户资料
const profileLoading = ref(false)
const profileForm = reactive({
  nickname: '',
  avatarUrl: ''
})

// 书签管理
const showAddBookmark = ref(false)
const bookmarks = computed(() => bookmarksStore.sortedBookmarks)
const sortableBookmarks = computed({
  get: () => bookmarks.value,
  set: (value) => {
    // 这里会在拖拽时更新
  }
})
const newBookmark = reactive({
  title: '',
  url: '',
  icon: ''
})

const iconError = ref(false)

// 应用设置
const settingsLoading = ref(false)
const settingsForm = reactive({
  theme: 'DARK' as 'LIGHT' | 'DARK' | 'AUTO',
  searchEngine: 'GOOGLE' as 'GOOGLE' | 'BING' | 'BAIDU' | 'DUCKDUCKGO',
  backgroundType: 'GRADIENT' as 'GRADIENT' | 'IMAGE' | 'COLOR',
  backgroundValue: ''
})

// 认证处理
const handleAuth = async () => {
  authLoading.value = true
  try {
    if (authMode.value === 'login') {
      await authStore.login(authForm.email, authForm.password)
      ElMessage.success('登录成功')
    } else {
      await authStore.signup(authForm.email, authForm.password)
      ElMessage.success('注册成功')
    }
    authForm.email = ''
    authForm.password = ''
  } catch (error: any) {
    ElMessage.error(error.message || '操作失败')
  } finally {
    authLoading.value = false
  }
}

// 退出登录
const handleLogout = async () => {
  await authStore.logout()
  ElMessage.success('已退出登录')
}

// 更新用户资料
const updateProfile = async () => {
  profileLoading.value = true
  try {
    console.log('准备更新用户资料:', profileForm)
    const success = await authStore.updateUserProfile({
      nickname: profileForm.nickname,
      avatarUrl: profileForm.avatarUrl
    })

    if (success) {
      ElMessage.success('资料更新成功')
      console.log('资料更新成功')
    } else {
      ElMessage.error('更新失败，请重试')
      console.log('更新失败')
    }
  } catch (error: any) {
    console.error('更新用户资料失败:', error)
    ElMessage.error(error.message || '更新失败')
  } finally {
    profileLoading.value = false
  }
}

// 书签相关
const getFavicon = (url: string) => {
  try {
    const domain = new URL(url).hostname
    return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`
  } catch {
    return 'https://myicons.yuholy.site/configData/icon/5_TV/Cover.png'
  }
}

const saveBookmark = async () => {
  if (!newBookmark.title.trim() || !newBookmark.url.trim()) {
    ElMessage.warning('请填写完整信息')
    return
  }

  try {
    const success = await bookmarksStore.addBookmark({
      title: newBookmark.title,
      url: newBookmark.url,
      icon: newBookmark.icon || null
    })

    if (success) {
      newBookmark.title = ''
      newBookmark.url = ''
      newBookmark.icon = ''
      iconError.value = false
      showAddBookmark.value = false
      ElMessage.success('书签已添加')
    } else {
      ElMessage.error('添加失败，请重试')
    }
  } catch (error: any) {
    ElMessage.error(error.message || '添加失败')
  }
}

const deleteBookmark = async (id: string) => {
  try {
    const success = await bookmarksStore.deleteBookmark(id)
    if (success) {
      ElMessage.success('书签已删除')
    } else {
      ElMessage.error('删除失败，请重试')
    }
  } catch (error: any) {
    ElMessage.error(error.message || '删除失败')
  }
}

// 编辑书签相关
const showEditBookmark = ref(false)
const editingBookmark = reactive({
  id: '',
  title: '',
  url: '',
  icon: ''
})
const editIconError = ref(false)

const editBookmark = (bookmark: any) => {
  editingBookmark.id = bookmark.id
  editingBookmark.title = bookmark.title
  editingBookmark.url = bookmark.url
  editingBookmark.icon = bookmark.iconUrl || ''
  editIconError.value = false
  showEditBookmark.value = true
}

const saveEditBookmark = async () => {
  if (!editingBookmark.title.trim() || !editingBookmark.url.trim()) {
    ElMessage.warning('请填写完整信息')
    return
  }

  try {
    const success = await bookmarksStore.updateBookmark(editingBookmark.id, {
      title: editingBookmark.title,
      url: editingBookmark.url,
      icon: editingBookmark.icon || null
    })

    if (success) {
      showEditBookmark.value = false
      ElMessage.success('书签已更新')
    } else {
      ElMessage.error('更新失败，请重试')
    }
  } catch (error: any) {
    ElMessage.error(error.message || '更新失败')
  }
}

// 拖拽排序处理
const onDragEnd = async (event: any) => {
  const { oldIndex, newIndex } = event
  if (oldIndex === newIndex) return

  try {
    // 更新所有书签的排序
    const updatedBookmarks = [...bookmarks.value]
    const movedBookmark = updatedBookmarks[oldIndex]
    updatedBookmarks.splice(oldIndex, 1)
    updatedBookmarks.splice(newIndex, 0, movedBookmark)

    // 更新每个书签的sortOrder
    for (let i = 0; i < updatedBookmarks.length; i++) {
      updatedBookmarks[i].sortOrder = i
    }

    // 批量更新到数据库
    await bookmarksStore.updateBookmarkOrder(updatedBookmarks)
    ElMessage.success('排序已更新')
  } catch (error: any) {
    ElMessage.error('排序更新失败')
    console.error('拖拽排序失败:', error)
  }
}

// 更新应用设置
const updateSettings = async () => {
  settingsLoading.value = true
  try {
    await authStore.updateUserSettings(settingsForm)
    ElMessage.success('设置保存成功')
  } catch (error: any) {
    ElMessage.error(error.message || '保存失败')
  } finally {
    settingsLoading.value = false
  }
}

// 初始化
onMounted(async () => {
  if (authStore.user) {
    // 从MySQL数据库获取最新的用户数据
    await authStore.fetchUserData()
    
    // 初始化用户资料表单
    if (authStore.profile) {
      profileForm.nickname = authStore.profile.nickname || ''
      profileForm.avatarUrl = authStore.profile.avatarUrl || ''
    }

    // 初始化应用设置表单
    if (authStore.settings) {
      settingsForm.theme = authStore.settings.theme || 'DARK'
      settingsForm.searchEngine = authStore.settings.searchEngine || 'GOOGLE'
      settingsForm.backgroundType = authStore.settings.backgroundType || 'GRADIENT'
      settingsForm.backgroundValue = authStore.settings.backgroundValue || ''
    }

    // 获取用户书签数据
    await bookmarksStore.fetchBookmarks()
  }
})
</script>

<style scoped lang="scss">
.settings-container {
  min-height: 100vh;
  background: #0a0a0a;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
  background: #111111;
  border-bottom: 1px solid #1f1f1f;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid #333333;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: #1a1a1a;
    border-color: #444444;
  }
}

.nav-title {
  h1 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #ffffff;
  }

  .nav-subtitle {
    font-size: 13px;
    color: #888888;
    margin-top: 2px;
    display: block;
  }
}

.nav-right {
  .user-info {
    display: flex;
    align-items: center;
    gap: 12px;

    .user-email {
      font-size: 14px;
      color: #cccccc;
    }

    .user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #333333;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
}

.main-content {
  display: flex;
  height: calc(100vh - 64px);
}

.sidebar {
  width: 240px;
  background: #111111;
  border-right: 1px solid #1f1f1f;
  padding: 24px 0;
  overflow-y: auto;
}

.sidebar-section {
  margin-bottom: 32px;

  .section-title {
    font-size: 11px;
    font-weight: 600;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 16px 12px;
  }
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #cccccc;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;

  &:hover {
    background: #1a1a1a;
    color: #ffffff;
  }

  &.active {
    background: #1a1a1a;
    color: #ffffff;
    border: 1px solid #333333;
  }

  .nav-icon {
    font-size: 16px;
    flex-shrink: 0;
  }
}

.content-area {
  flex: 1;
  background: #0a0a0a;
  overflow-y: auto;
}

.content-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid #1f1f1f;
  background: #111111;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 24px;

  .panel-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: #ffffff;
  }

  .panel-stats {
    display: flex;
    gap: 16px;

    .stat-item {
      font-size: 13px;
      color: #888888;
    }
  }
}

.header-right {
  display: flex;
  gap: 12px;
}

.auth-tabs {
  display: flex;
  background: #1a1a1a;
  border-radius: 6px;
  padding: 2px;
  border: 1px solid #333333;
}

.tab-btn {
  padding: 6px 16px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #cccccc;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;

  &.active {
    background: #ffffff;
    color: #000000;
  }
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #333333;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;

  &.primary {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;

    &:hover {
      background: #f0f0f0;
    }
  }

  &.danger {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;

    &:hover {
      background: #b91c1c;
    }
  }
}

.panel-content {
  flex: 1;
  padding: 32px;
  overflow-y: auto;
}

.auth-form-container {
  max-width: 400px;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-row {
  display: flex;
  gap: 16px;

  .form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}

.form-input {
  padding: 12px 16px;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.2s ease;

  &::placeholder {
    color: #666666;
  }

  &:focus {
    outline: none;
    border-color: #555555;
    background: #222222;
  }
}

.form-select {
  padding: 12px 16px;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;

  &:focus {
    outline: none;
    border-color: #555555;
  }

  option {
    background: #1a1a1a;
    color: #ffffff;
  }
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.primary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: #ffffff;
  border: none;
  border-radius: 6px;
  color: #000000;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover:not(:disabled) {
    background: #f0f0f0;
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

.secondary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover:not(:disabled) {
    background: #2a2a2a;
    border-color: #555555;
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

.loading-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.user-profile-container {
  max-width: 600px;
}

.profile-section {
  margin-bottom: 32px;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: #111111;
  border: 1px solid #1f1f1f;
  border-radius: 8px;
}

.profile-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .el-icon {
    font-size: 32px;
    color: #666666;
  }
}

.profile-info {
  .profile-name {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: #ffffff;
  }

  .profile-email {
    font-size: 14px;
    color: #888888;
    margin: 0;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;

  .empty-icon {
    width: 64px;
    height: 64px;
    background: #1a1a1a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;

    .el-icon {
      font-size: 24px;
      color: #666666;
    }
  }

  h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #ffffff;
  }

  p {
    font-size: 14px;
    color: #888888;
    margin: 0 0 24px 0;
  }
}

.table-container {
  background: #111111;
  border: 1px solid #1f1f1f;
  border-radius: 8px;
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;

  th {
    padding: 16px 20px;
    background: #1a1a1a;
    border-bottom: 1px solid #1f1f1f;
    font-size: 13px;
    font-weight: 600;
    color: #888888;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  td {
    padding: 16px 20px;
    border-bottom: 1px solid #1f1f1f;
    font-size: 14px;
    color: #ffffff;
  }

  .table-row {
    transition: background-color 0.2s ease;

    &:hover {
      background: #1a1a1a;
    }

    &:last-child td {
      border-bottom: none;
    }
  }
}

.favicon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.bookmark-title {
  font-weight: 500;
}

.bookmark-url {
  color: #888888;
  font-family: monospace;
  font-size: 13px;
}

.action-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.edit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid #333333;
  border-radius: 6px;
  color: #3b82f6;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: #3b82f6;
    color: #ffffff;
  }
}

.delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid #333333;
  border-radius: 6px;
  color: #dc2626;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: #dc2626;
    color: #ffffff;
  }
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;

  .full-width {
    grid-column: 1 / -1;
  }
}

.setting-card {
  background: #111111;
  border: 1px solid #1f1f1f;
  border-radius: 8px;
  padding: 24px;

  .setting-header {
    margin-bottom: 16px;

    h3 {
      font-size: 16px;
      font-weight: 600;
      margin: 0 0 4px 0;
      color: #ffffff;
    }

    p {
      font-size: 13px;
      color: #888888;
      margin: 0;
    }
  }
}

.dialog-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

// 响应式设计
@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid #1f1f1f;
  }

  .nav-menu {
    flex-direction: row;
    overflow-x: auto;
    padding: 0 16px;
  }

  .nav-item {
    white-space: nowrap;
    min-width: 120px;
  }

  .panel-content {
    padding: 20px;
  }

  .panel-header {
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .form-row {
    flex-direction: column;
  }
}

// Element Plus 弹窗深色主题样式
:deep(.el-dialog) {
  background: #1a1a1a !important;
  border: 1px solid #333333;

  .el-dialog__header {
    background: #222222 !important;
    border-bottom: 1px solid #333333;

    .el-dialog__title {
      color: #ffffff !important;
    }

    .el-dialog__headerbtn .el-dialog__close {
      color: #cccccc !important;

      &:hover {
        color: #ffffff !important;
      }
    }
  }

  .el-dialog__body {
    background: #1a1a1a !important;
    color: #ffffff !important;
  }
}

// 弹窗内容样式优化
.custom-dialog {
  :deep(.el-dialog__body) {
    .dialog-content {
      .form-label {
        color: #ffffff !important;
        font-weight: 500;
        margin-bottom: 8px;
        display: block;
      }

      .form-input {
        background: #2a2a2a !important;
        border: 1px solid #444444 !important;
        color: #ffffff !important;
        padding: 12px 16px;
        border-radius: 6px;
        width: 100%;

        &:focus {
          border-color: #666666 !important;
          background: #333333 !important;
          outline: none !important;
          box-shadow: 0 0 0 2px rgba(102, 102, 102, 0.2) !important;
        }

        &::placeholder {
          color: #888888 !important;
        }
      }
    }

    .dialog-footer {
      .secondary-btn {
        background: #333333 !important;
        color: #cccccc !important;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;

        &:hover {
          background: #444444 !important;
          color: #ffffff !important;
        }
      }

      .primary-btn {
        background: #0066cc !important;
        color: #ffffff !important;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;

        &:hover {
          background: #0052a3 !important;
        }
      }
    }
  }
}

// 遮罩层样式
:deep(.el-overlay) {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

.icon-preview {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: #2a2a2a;
  border-radius: 0.5rem;
  border: 1px solid #333333;

  img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
  }

  .error-text {
    color: #ff6b6b;
    font-size: 0.875rem;
  }
}
</style>